<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>收购统计 - 新疆奎木星测控技术有限公司</title>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
    <style>
        body {
            margin: 0;
            font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
            background-color: #f5f7fa;
        }
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            text-align: center;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
        .container {
            max-width: 1400px;
            margin: 20px auto;
            padding: 0 20px;
        }
        .search-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
        .data-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
        .search-form .el-form-item {
            margin-bottom: 18px;
        }
        .statistics-summary {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }
        .stat-item {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            border-radius: 8px;
            text-align: center;
        }
        .stat-value {
            font-size: 28px;
            font-weight: bold;
            margin-bottom: 5px;
        }
        .stat-label {
            font-size: 14px;
            opacity: 0.9;
        }
        .chart-container {
            margin: 20px 0;
            padding: 20px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="header">
            <h1>收购统计管理</h1>
            <p>粮食收购数据统计分析平台</p>
        </div>
        
        <div class="container">
            <!-- 搜索筛选区域 -->
            <div class="search-card">
                <h3>数据筛选条件</h3>
                <el-form :model="searchForm" class="search-form" :inline="true">
                    <el-form-item label="时间范围">
                        <el-date-picker
                            v-model="searchForm.dateRange"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            format="YYYY-MM-DD HH:mm:ss"
                            value-format="YYYY-MM-DD HH:mm:ss"
                        >
                        </el-date-picker>
                    </el-form-item>
                    
                    <el-form-item label="年份">
                        <el-select v-model="searchForm.year" placeholder="选择年份" clearable>
                            <el-option v-for="year in yearOptions" :key="year" :label="year" :value="year"></el-option>
                        </el-select>
                    </el-form-item>
                    
                    <el-form-item label="加工厂">
                        <el-select v-model="searchForm.factoryId" placeholder="选择加工厂" clearable>
                            <el-option v-for="factory in factoryOptions" :key="factory.id" :label="factory.name" :value="factory.id"></el-option>
                        </el-select>
                    </el-form-item>
                    
                    <el-form-item label="农户身份证">
                        <el-input v-model="searchForm.idCard" placeholder="请输入农户身份证号" clearable></el-input>
                    </el-form-item>
                    
                    <el-form-item label="粮食品名">
                        <el-select v-model="searchForm.article" placeholder="选择粮食品名" clearable>
                            <el-option v-for="article in articleOptions" :key="article" :label="article" :value="article"></el-option>
                        </el-select>
                    </el-form-item>
                    
                    <el-form-item label="品种">
                        <el-select v-model="searchForm.variety" placeholder="选择品种" clearable>
                            <el-option v-for="variety in varietyOptions" :key="variety" :label="variety" :value="variety"></el-option>
                        </el-select>
                    </el-form-item>
                    
                    <el-form-item label="价格范围">
                        <el-input-number v-model="searchForm.priceMin" placeholder="最低价格" :min="0" :precision="2"></el-input-number>
                        <span style="margin: 0 10px;">-</span>
                        <el-input-number v-model="searchForm.priceMax" placeholder="最高价格" :min="0" :precision="2"></el-input-number>
                    </el-form-item>
                    
                    <el-form-item label="金额范围">
                        <el-input-number v-model="searchForm.moneyMin" placeholder="最低金额" :min="0" :precision="2"></el-input-number>
                        <span style="margin: 0 10px;">-</span>
                        <el-input-number v-model="searchForm.moneyMax" placeholder="最高金额" :min="0" :precision="2"></el-input-number>
                    </el-form-item>
                    
                    <el-form-item label="数据状态">
                        <el-select v-model="searchForm.isValid" placeholder="选择数据状态" clearable>
                            <el-option label="有效" :value="1"></el-option>
                            <el-option label="无效" :value="0"></el-option>
                        </el-select>
                    </el-form-item>
                    
                    <el-form-item label="村/连">
                        <el-select v-model="searchForm.villageId" placeholder="选择村/连" clearable>
                            <el-option v-for="village in villageOptions" :key="village.id" :label="village.name" :value="village.id"></el-option>
                        </el-select>
                    </el-form-item>
                    
                    <el-form-item>
                        <el-button type="primary" @click="searchData">查询统计</el-button>
                        <el-button @click="resetSearch">重置条件</el-button>
                        <el-button type="success" @click="exportData">导出数据</el-button>
                    </el-form-item>
                </el-form>
            </div>
            
            <!-- 统计汇总区域 -->
            <div class="statistics-summary">
                <div class="stat-item">
                    <div class="stat-value">{{ statisticsData.totalRecords }}</div>
                    <div class="stat-label">总收购记录数</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">{{ statisticsData.totalAmount.toFixed(2) }}</div>
                    <div class="stat-label">总收购金额（万元）</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">{{ statisticsData.totalWeight.toFixed(2) }}</div>
                    <div class="stat-label">总收购重量（吨）</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">{{ statisticsData.avgPrice.toFixed(2) }}</div>
                    <div class="stat-label">平均收购价格（元/斤）</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">{{ statisticsData.factoryCount }}</div>
                    <div class="stat-label">参与加工厂数量</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">{{ statisticsData.farmerCount }}</div>
                    <div class="stat-label">参与农户数量</div>
                </div>
            </div>
            
            <!-- 数据表格区域 -->
            <div class="data-card">
                <h3>收购数据明细</h3>
                <el-table :data="purchaseData" style="width: 100%" v-loading="loading">
                    <el-table-column prop="bill_no" label="单据号" width="150"></el-table-column>
                    <el-table-column prop="farmer_name" label="农户姓名" width="100"></el-table-column>
                    <el-table-column prop="id_card" label="身份证号" width="150"></el-table-column>
                    <el-table-column prop="factory_name" label="加工厂" width="120"></el-table-column>
                    <el-table-column prop="article" label="粮食品名" width="100"></el-table-column>
                    <el-table-column prop="variety" label="品种" width="100"></el-table-column>
                    <el-table-column prop="price" label="价格(元/斤)" width="100">
                        <template #default="scope">
                            <span>{{ scope.row.price.toFixed(2) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="money" label="金额(元)" width="120">
                        <template #default="scope">
                            <span>{{ scope.row.money.toFixed(2) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="order_time" label="下单时间" width="150"></el-table-column>
                    <el-table-column prop="settle_time" label="结算时间" width="150"></el-table-column>
                    <el-table-column prop="year" label="年份" width="80"></el-table-column>
                    <el-table-column prop="is_valid" label="状态" width="80">
                        <template #default="scope">
                            <el-tag :type="scope.row.is_valid ? 'success' : 'danger'">
                                {{ scope.row.is_valid ? '有效' : '无效' }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="village_name" label="村/连" width="100"></el-table-column>
                    <el-table-column prop="car_no" label="车牌号" width="100"></el-table-column>
                    <el-table-column prop="remarks" label="备注" min-width="150"></el-table-column>
                </el-table>
                
                <!-- 分页组件 -->
                <el-pagination
                    v-model:current-page="pagination.currentPage"
                    v-model:page-size="pagination.pageSize"
                    :page-sizes="[10, 20, 50, 100]"
                    :total="pagination.total"
                    layout="total, sizes, prev, pager, next, jumper"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    style="margin-top: 20px; text-align: right;"
                >
                </el-pagination>
            </div>
        </div>
    </div>

    <script>
        const { createApp } = Vue;
        const { ElMessage, ElMessageBox } = ElementPlus;
        
        createApp({
            data() {
                return {
                    loading: false,
                    // 搜索表单数据
                    searchForm: {
                        dateRange: [],
                        year: '',
                        factoryId: '',
                        idCard: '',
                        article: '',
                        variety: '',
                        priceMin: null,
                        priceMax: null,
                        moneyMin: null,
                        moneyMax: null,
                        isValid: '',
                        villageId: ''
                    },
                    // 下拉选项数据
                    yearOptions: [2024, 2023, 2022, 2021, 2020],
                    factoryOptions: [
                        { id: 1, name: '新疆天山面粉厂' },
                        { id: 2, name: '乌鲁木齐粮油加工厂' },
                        { id: 3, name: '昌吉州粮食加工厂' },
                        { id: 4, name: '伊犁河谷面粉厂' }
                    ],
                    articleOptions: ['小麦', '玉米', '大豆', '水稻', '高粱'],
                    varietyOptions: ['春小麦', '冬小麦', '硬质小麦', '软质小麦', '普通玉米', '糯玉米'],
                    villageOptions: [
                        { id: 1, name: '第一村' },
                        { id: 2, name: '第二村' },
                        { id: 3, name: '第三村' },
                        { id: 4, name: '第一连' },
                        { id: 5, name: '第二连' }
                    ],
                    // 统计汇总数据
                    statisticsData: {
                        totalRecords: 1256,
                        totalAmount: 2856.78,
                        totalWeight: 15678.90,
                        avgPrice: 2.85,
                        factoryCount: 12,
                        farmerCount: 856
                    },
                    // 收购数据列表
                    purchaseData: [
                        {
                            id: 1,
                            bill_no: 'SG202401001',
                            farmer_name: '张三',
                            id_card: '650101199001011234',
                            factory_name: '新疆天山面粉厂',
                            article: '小麦',
                            variety: '春小麦',
                            price: 2.85,
                            money: 5700.00,
                            order_time: '2024-01-15 09:30:00',
                            settle_time: '2024-01-15 16:45:00',
                            year: 2024,
                            is_valid: 1,
                            village_name: '第一村',
                            car_no: '新A12345',
                            remarks: '优质小麦，水分含量12%'
                        },
                        {
                            id: 2,
                            bill_no: 'SG202401002',
                            farmer_name: '李四',
                            id_card: '650102199002021234',
                            factory_name: '乌鲁木齐粮油加工厂',
                            article: '玉米',
                            variety: '普通玉米',
                            price: 2.20,
                            money: 4400.00,
                            order_time: '2024-01-16 10:15:00',
                            settle_time: '2024-01-16 17:20:00',
                            year: 2024,
                            is_valid: 1,
                            village_name: '第二村',
                            car_no: '新B67890',
                            remarks: '玉米品质良好'
                        },
                        {
                            id: 3,
                            bill_no: 'SG202401003',
                            farmer_name: '王五',
                            id_card: '650103199003031234',
                            factory_name: '昌吉州粮食加工厂',
                            article: '大豆',
                            variety: '黄豆',
                            price: 3.50,
                            money: 7000.00,
                            order_time: '2024-01-17 08:45:00',
                            settle_time: '2024-01-17 15:30:00',
                            year: 2024,
                            is_valid: 1,
                            village_name: '第一连',
                            car_no: '新C11111',
                            remarks: '有机大豆，无农药残留'
                        }
                    ],
                    // 分页数据
                    pagination: {
                        currentPage: 1,
                        pageSize: 20,
                        total: 1256
                    }
                };
            },
            
            methods: {
                /**
                 * 搜索数据 - 根据筛选条件查询收购统计数据
                 * 这个函数会收集所有的筛选条件，然后向后端发送请求获取数据
                 */
                searchData() {
                    this.loading = true;
                    
                    // 模拟API调用
                    setTimeout(() => {
                        ElMessage.success('数据查询完成');
                        this.loading = false;
                        // 这里应该调用真实的API接口
                        // this.fetchPurchaseData();
                    }, 1000);
                },
                
                /**
                 * 重置搜索条件 - 清空所有筛选条件，恢复到初始状态
                 */
                resetSearch() {
                    this.searchForm = {
                        dateRange: [],
                        year: '',
                        factoryId: '',
                        idCard: '',
                        article: '',
                        variety: '',
                        priceMin: null,
                        priceMax: null,
                        moneyMin: null,
                        moneyMax: null,
                        isValid: '',
                        villageId: ''
                    };
                    ElMessage.info('搜索条件已重置');
                },
                
                /**
                 * 导出数据 - 将当前查询结果导出为Excel文件
                 */
                exportData() {
                    ElMessage.success('数据导出功能开发中...');
                    // 这里应该实现真实的导出功能
                },
                
                /**
                 * 处理每页显示数量变化
                 * @param {number} val - 新的每页显示数量
                 */
                handleSizeChange(val) {
                    this.pagination.pageSize = val;
                    this.pagination.currentPage = 1;
                    this.searchData();
                },
                
                /**
                 * 处理当前页码变化
                 * @param {number} val - 新的页码
                 */
                handleCurrentChange(val) {
                    this.pagination.currentPage = val;
                    this.searchData();
                }
            },
            
            mounted() {
                // 页面加载完成后自动查询一次数据
                this.searchData();
            }
        }).use(ElementPlus).mount('#app');
    </script>
</body>
</html>